<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width">
        <meta name="restype" content="documentation">
        <meta name="product" content="kendo-ui">
        <meta name="subproduct" content="sortable">
        <title>Integration with Grid and ListView | Kendo UI Sortable</title>
        <link rel="shortcut icon" href="/favicon.ico"/>
        <meta name="description" content="Learn how to reorder Kendo UI Grid and ListView items with the Kendo UI Sortable widget.">
        <link href="//fonts.googleapis.com/css?family=Roboto:400,500,700,900" rel="stylesheet">
        <link href='https://fonts.googleapis.com/css?family=Roboto+Mono:400,500,700' rel='stylesheet' type='text/css'>
        <!-- <link href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.common.min.css" rel="stylesheet" /> -->
        <link rel="stylesheet" href="http://oygy5legq.bkt.clouddn.com/kendo.common.min.css">
        <link rel="stylesheet" href="/assets/styles.css?cb=8338967476da1c756a6defe19c1f9984">
        <link rel="stylesheet" href="/assets/icon-font.css?cb=25d8b9593057297c278fcd6d7d263c8e">
        <link rel="stylesheet" href="/assets/theme.css?cb=d82da02940126146560da1ae3bb0bf64">
        
        <!-- <script src="https://code.jquery.com/jquery-1.10.2.js"></script> -->
        <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
        <!-- <script src="https://kendo.cdn.telerik.com/2017.3.1026/js/kendo.web.min.js"></script> -->
        <script src="http://oygy5legq.bkt.clouddn.com/kendo.web.min.js"></script>
        <!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/codemirror.min.css">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/codemirror.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/mode/javascript/javascript.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/mode/css/css.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/mode/xml/xml.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/mode/htmlmixed/htmlmixed.min.js"></script> -->
        <script src="/assets/prettify.js?cb=9671553084e1962263b152af1f563c3c"></script>
        <script src="/assets/app.js?cb=c577f29da14c3752a8c4ba001dde39e5"></script>
        
        

        <!--[if lt IE 9]>
        <script>
        document.createElement('header');
        document.createElement('nav');
        document.createElement('section');
        document.createElement('article');
        document.createElement('aside');
        document.createElement('footer');
        document.createElement('hgroup');
        </script>
        <![endif]-->
    </head>
    <body>
        <!-- Google Tag Manager -->
        <!-- <noscript>
            <iframe src="//www.googletagmanager.com/ns.html?id=GTM-6X92" height="0" width="0" style="display: none; visibility: hidden"></iframe>
        </noscript>
        <script>(function(w, d, s, l, i) { w[l] = w[l] || []; w[l].push({ 'gtm.start': new Date().getTime(), event: 'gtm.js' }); var f = d.getElementsByTagName(s)[0], j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : ''; j.async = true; j.src = '//www.googletagmanager.com/gtm.js?id=' + i + dl; f.parentNode.insertBefore(j, f); })(window, document, 'script', 'dataLayer', 'GTM-6X92');</script> -->
        <!-- End Google Tag Manager -->
        <aside class="TK-Hat">
    <figure class="TK-Hat-Brand">
        <a href="https://www.progress.com" class="TK-PRGS-Logo">
            <svg xmlns="http://www.w3.org/2000/svg" width="94" height="40" viewBox="0 0 512 120">
                <path fill="#5ce500" d="M95.52 29.33v51a3.93 3.93 0 0 1-1.78 3.08l-1.67 1-12.72 7.35-8.59 5-1.78 1V42.6L21.23 15 43.91 1.93 46 .74a3.94 3.94 0 0 1 3.56 0L81 18.9l14.51 8.38v2.05zM58.36 48.72l-9.79-5.66-22.91-13.23a4 4 0 0 0-3.56 0L1.77 41.57 0 42.6l34.49 19.91v39.83l20.3-11.73 1.79-1a3.94 3.94 0 0 0 1.78-3.08V48.72zM0 82.43l23.86 13.78V68.63z"></path>
                <path fill="#4b4e52" d="M148.09 27.28h-26v70.48h11.55V70.1h14.57c15.77 0 24.45-7.7 24.45-21.69 0-6.35-2.4-21.12-24.55-21.12m12.78 21.31c0 7.95-4.12 11.19-14.24 11.19h-13v-22.1h14.57c8.56 0 12.71 3.57 12.71 10.91M207 46.41l.87.42-2 10.42-1.35-.42a11.32 11.32 0 0 0-3.34-.51c-10.79 0-11.67 8.59-11.67 19v22.44h-10.64V46h10v6.24c2.73-4.2 6-6.37 10.37-6.9a14.55 14.55 0 0 1 7.76 1.07M233.29 45c-8.42 0-15.16 3.2-19.5 9.27-4.56 6.37-5.23 13.85-5.23 17.74 0 16.36 9.7 26.92 24.73 26.92 18.26 0 24.73-14.71 24.73-27.3 0-7.25-2.15-13.82-6-18.51-4.41-5.31-10.87-8.12-18.7-8.12m0 44.38c-8.37 0-13.57-6.66-13.57-17.37s5.2-17.55 13.57-17.55S247 61.23 247 71.78c0 10.83-5.24 17.56-13.66 17.56m114.55-42.93l.87.42-2 10.42-1.35-.42a11.26 11.26 0 0 0-3.33-.51c-10.78 0-11.66 8.59-11.66 19v22.44h-10.66V46h10v6.24c2.73-4.2 6-6.37 10.37-6.9a14.54 14.54 0 0 1 7.73 1.06m38.4 34.76l-.2.57c-2.23 6.36-7.57 7.7-11.65 7.7-8.09 0-13.3-5.37-13.81-14.09h36.59l.13-1a31.26 31.26 0 0 0 .12-4.12v-.93C396.93 54.78 387.48 45 374 45c-7.9 0-14.37 3.1-18.73 9a30.85 30.85 0 0 0-5.54 18c0 16 9.95 26.74 24.74 26.74 11.45 0 19.33-5.82 22.2-16.38l.33-1.2h-10.7zM361 66.05c.9-7.17 5.81-11.73 12.79-11.73 5.33 0 11.64 3.1 12.52 11.73H361zm-60.7-15.71c-3.45-3.58-8.06-5.39-13.76-5.39-15.69 0-22.83 13.81-22.83 26.63 0 13.16 7.06 26.44 22.83 26.44a18.33 18.33 0 0 0 13.35-5.42c0 2.28-.1 4.45-.16 5.38-.58 8.54-4.68 12.51-12.91 12.51-4.47 0-9.61-1.59-10.6-6l-.22-1h-10.54l.17 1.41c1.1 9.12 9.11 14.79 20.9 14.79 10.34 0 17.7-3.9 21.28-11.26 1.73-3.55 2.6-8.72 2.6-15.37V46h-10.13v4.34zm-13.11 38.15c-3.74 0-12.43-1.69-12.43-17.37 0-10.3 4.87-16.7 12.71-16.7 6.06 0 12.52 4.39 12.52 16.7 0 10.87-4.79 17.37-12.81 17.37m159.67-6.31c0 8.23-6.83 16.53-22.09 16.53-13.5 0-21.53-5.85-22.61-16.45l-.15-1.1h10.52l.21.84c1.29 6.38 7.37 7.72 12.24 7.72 5.34 0 11-1.72 11-6.54 0-2.44-1.59-4.18-4.73-5.16-1.86-.55-4.15-1.2-6.56-1.87-4.16-1.16-8.47-2.38-11.12-3.29-6.56-2.35-10.33-6.93-10.33-12.56 0-10.43 10.16-15.11 20.22-15.11 13.46 0 20.42 5.07 21.3 15.49l.09 1.07H434.5l-.14-.82c-1-6-7-6.9-10.48-6.9-3 0-10 .53-10 5.5 0 2.25 1.93 3.91 5.89 5.06 1.18.33 2.94.78 5 1.31 4.22 1.09 9.48 2.46 12.13 3.37 6.59 2.32 9.93 6.67 9.93 13m49.39 0c0 8.23-6.83 16.53-22.09 16.53-13.5 0-21.53-5.85-22.61-16.45l-.11-1.09H462l.12.74c1.29 6.38 7.37 7.72 12.24 7.72 5.34 0 11-1.72 11-6.54 0-2.44-1.59-4.18-4.72-5.16-1.86-.55-4.15-1.2-6.57-1.87-4.16-1.16-8.46-2.38-11.11-3.29-6.57-2.35-10.33-6.93-10.33-12.56 0-10.43 10.16-15.11 20.22-15.11 13.46 0 20.42 5.07 21.29 15.49l.09 1.07H483.9l-.14-.82c-1-6-7-6.9-10.48-6.9-3 0-9.95.53-9.95 5.5 0 2.25 1.93 3.91 5.89 5.06 1.18.33 2.94.78 5 1.31 4.22 1.09 9.48 2.46 12.13 3.37 6.58 2.32 9.93 6.67 9.93 13m8.43-30.78a7.37 7.37 0 1 1 7.29-7.37 7.23 7.23 0 0 1-7.29 7.37m0-13.49a6.12 6.12 0 1 0 6 6.12 5.91 5.91 0 0 0-6-6.12m-.85 7.49v2.46h-2.17v-7.74h3.62a2.58 2.58 0 0 1 2.86 2.7 2.26 2.26 0 0 1-1.49 2.34l1.77 2.7H506l-1.49-2.46h-.68zm1.21-3.49h-1.21v1.73h1.21a.86.86 0 0 0 1-.85.88.88 0 0 0-1-.89"></path>
            </svg>
        </a>
    </figure>
</aside>
<header id="page-header">
    <div class="toggle-nav"><span class="k-icon k-i-menu"></span></div>


    <div id="logo-bar">
        <a href="/introduction">
            <img alt="Kendo UI logo" class="logo" src="/images/kendo-ui.svg">
        </a>
    </div>

    
    <span class="show-search">
        <span class="k-icon k-i-search"></span>
    </span>
    
    <div class="nav-buttons">
        <a href="http://demos.telerik.com/kendo-ui/" class="btn demos-btn">Demos</a>
        <a href="http://www.telerik.com/kendo-ui" class="btn about-btn">About</a>
        <a href="http://www.telerik.com/purchase/kendo-ui" class="btn pricing-btn">Pricing</a>
        <a href="http://www.telerik.com/download/kendo-ui" class="btn btn-primary">Try now</a>
    </div>
</header>
        <div id="page-inner-content">
    <div id="page-nav">
        <div id="page-tree"></div>
        <script>
        $("#page-tree").kendoTreeView({
            dataSource: {
                transport: {
                    read: {
                        url: "/default.json",
                        dataType: "json"
                    }
                },
                schema: {
                    model: {
                        id: "path",
                        children: "items",
                        hasChildren: "items"
                    }
                }
            },
            messages: {
                loading: " "
            },
            select: preventParentSelection,
            template: navigationTemplate("/"),
            dataBound: expandNavigation("controls/interactivity/sortable/integration.html")
        });
        </script>
    </div>

    <a id="page-edit-link" href="https://github.com/telerik/kendo-ui-core/edit/master/docs//controls/interactivity/sortable/integration.md"><span class="k-icon k-i-pencil"></span> Edit this page</a>
    

    <div id="page-article">
        <article>
            
             <h1 id="integration-with-grid-and-listview"><a href="#integration-with-grid-and-listview">Integration with Grid and ListView</a></h1>

<p><a href="http://demos.telerik.com/kendo-ui/sortable/index">Kendo UI Sortable widget</a> can be used to reorder the items in a Kendo UI Grid or Kendo UI ListView widget via drag and drop.</p>

<h2 id="prerequisites"><a href="#prerequisites">Prerequisites</a></h2>

<p>Before going on reading, make sure you are familiar with the following topics:</p>

<ul>
<li><a href="/controls/interactivity/sortable/overview">Overview of the Sortable Widget</a></li>
<li><a href="/controls/data-management/grid/overview">Overview of Kendo UI Grid</a></li>
<li><a href="/api/javascript/data/datasource#methods">Kendo UI DataSource API</a></li>
</ul>

<h2 id="reordering-of-items"><a href="#reordering-of-items">Reordering of Items</a></h2>

<blockquote>
<p><strong>Important</strong></p>

<p>The Sortable widget reorders the HTML DOM elements. It does not automatically update the order of the items in the DataSource. This means that you should explicitly implement this behavior.</p>
</blockquote>

<h2 id="sortable-and-grid"><a href="#sortable-and-grid">Sortable and Grid</a></h2>

<h3 id="reorder-grid-table-rows"><a href="#reorder-grid-table-rows">Reorder Grid Table Rows</a></h3>

<p>To reorder the table rows of the Grid, initialize the Sortable widget on the Grid's <a href="/api/javascript/ui/grid#fields-table"><code>table</code> element</a>. Normally, the <code>filter</code> property of the Sortable should select all <code>tr</code> elements that are direct children of the table's <code>tbody</code> element, e.g. <code>filter: "&gt;tbody &gt;tr"</code>.</p>

<blockquote>
<p><strong>Important</strong>  </p>

<p>In an AngularJS application initialize the Sortable widget as a parent directive. The <code>filter</code> configuration option selects all <code>tr</code> elements that are children of the <code>.k-grid</code> wrapper. For detailed information, refer to <a href="/controls/interactivity/sortable/how-to/AngularJS/use-sortable-grid-angular">this example</a>.</p>
</blockquote>

<h3 id="set-hint-in-grid"><a href="#set-hint-in-grid">Set Hint in Grid</a></h3>

<p>The <code>hint</code> element of the Sortable is appended to the <code>&lt;body&gt;</code> element. As a result, its width is different from the width of the Grid.</p>

<p>The example below demonstrates how to style the <code>hint</code> element, so it looks like the <code>row</code> element that is currently dragged.</p>

<h6>Example</h6>

<pre><code>&lt;div id="grid"&gt;&lt;/div&gt;
&lt;script&gt;

  $("#grid").kendoGrid({
    dataSource: {
      data: [{name: "John", age: 25}, {name: "Jane", age: 25}]
    }
  });

  $("#grid").data("kendoGrid").table.kendoSortable({
    filter: "&gt;tbody &gt;tr",
    hint: function(element) { //customize the hint
      var grid = $("#grid").data("kendoGrid"),
          table = grid.table.clone(), //clone Grid's table
          wrapperWidth = grid.wrapper.width(), //get Grid's width
          wrapper = $("&lt;div class='k-grid k-widget'&gt;&lt;/div&gt;").width(wrapperWidth),
          hint;

      table.find("thead").remove(); //remove the Grid's header from the hint
      table.find("tbody").empty(); //remove the existing rows from the hint
      table.wrap(wrapper); //wrap the table
      table.append(element.clone()); //append the dragged element

      hint = table.parent(); //get the wrapper

      return hint; //return the hint element
    },
    placeholder: function(element) { //customize the Placeholder
      return element.clone().addClass("k-state-hover").css("opacity", 0.65);
    },
    change: function(e) {
      //handle the change event
      //update the underlying data according to the DOM position change
      //see previous examples
    }
  });
&lt;/script&gt;
</code></pre>

<h2 id="sortable-and-editable-grid"><a href="#sortable-and-editable-grid">Sortable and Editable Grid</a></h2>

<p>If the editing functionality of the Grid is enabled, use a more specific filter selector that excludes the item, which is currently in editing mode, e.g. <code>.filter("&gt;tbody &gt;tr:not(.k-grid-edit-row)")</code>. In this way the Sortable functionality will not interfere with the editing feature of the Grid.</p>

<p>If the Grid is configured to display details, use a selector that matches only the master Grid rows, e.g. <code>filter: "&gt;tbody &gt;tr.k-master-row"</code>. In this way the detail rows will not be draggable.</p>

<p>For additional information on the Sortable events, refer to the <a href="/api/javascript/ui/sortable#events">JavaScript API article on Sortable events</a> and the <a href="http://demos.telerik.com/kendo-ui/web/sortable/integration-grid.html">Grid/Sortable integration demo</a>.</p>

<h3 id="grid-in-inline-and-popup-editing-modes"><a href="#grid-in-inline-and-popup-editing-modes">Grid in Inline and Popup Editing Modes</a></h3>

<p>The editing functionality of the Kendo UI Grid is rendered through its <a href="http://demos.telerik.com/kendo-ui/grid/editing-inline">inline</a>, <a href="http://demos.telerik.com/kendo-ui/grid/editing-popup">popup</a> or <a href="http://demos.telerik.com/kendo-ui/grid/editing">batch</a> editing mode. Note that the inline and popup modes are more common and easier to implement, so it is advisable to use either of them instead of the batch one.</p>

<p>If you use the <code>inline</code> or <code>popup</code> editing mode, set a more specific filter which excludes the item that is currently in editing mode, as demonstrated in the example below.</p>

<h6>Example</h6>

<pre><code>.filter("&gt;tbody &gt;tr:not(.k-grid-edit-row)")
</code></pre>

<h3 id="grid-in-batch-editing-mode"><a href="#grid-in-batch-editing-mode">Grid in Batch Editing Mode</a></h3>

<p>The draggable functionality of the Sortable prevents the <code>mousedown</code> event. As a result, the <code>change</code> event of the editor input does not fire, which in turn prevents the MVVM from saving the updated value.</p>

<p>If you use the <code>batch</code> (or <code>incell</code>) editing modes, the code from the example above applied to the inline and popup editing modes is not working. The solution to this issue is to use <a href="http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#configuration-columns.editor">custom editors</a> and configure them to <a href="http://docs.telerik.com/kendo-ui/framework/mvvm/bindings/value#controlling-when-the-view-model-is-updated">update when the <code>input</code> event fires</a>—by default, the framework listens for the <code>change</code> event. To implement the solution, add the <code>data-value-update="input"</code> attribute to the editor inputs. The downside of this approach is that the input event does not work for old versions of the Internet Explorer.</p>

<blockquote>
<p><strong>Important</strong></p>

<p>The <code>data-value-update</code> approach works with regular inputs. However, you must configure the Kendo UI widgets manually as they do not support the <code>data-value-update</code> attribute.</p>
</blockquote>

<p>For runnable examples, refer to the article on <a href="/controls/interactivity/sortable/how-to/use-sortable-grid">how to use the Sortable with Grids in incell editing mode</a>, or to the article on <a href="/controls/interactivity/sortable/how-to/AngularJS/use-sortable-grid-angular">how to use the Sortable with Grids in batch editing mode within an AngularJS application</a>.</p>

<h2 id="sortable-and-listview"><a href="#sortable-and-listview">Sortable and ListView</a></h2>

<h3 id="reorder-listview-items"><a href="#reorder-listview-items">Reorder ListView Items</a></h3>

<p>Sortable widget should be initialized on the ListView element. In the general case the <code>filter</code> property of the widget should select all elements that are direct children of the ListView's element. For example: <code>.filter("&gt;div")</code>.</p>

<h3 id="sortable-and-editable-listview"><a href="#sortable-and-editable-listview">Sortable and Editable ListView</a></h3>

<p>If the editing functionality of the ListView is enabled, use a more specific filter selector that excludes the item, which is currently in editing mode, e.g. <code>.filter("&gt;div:not(.k-edit-item)"</code>. In this way the Sortable functionality will not interfere with the editing feature of the ListView.</p>

<p>The ListView <code>dataItems</code> can be reordered in <a href="/controls/interactivity/sortable/integration#reorder-grid-table-rows">the same way as the Grid ones</a>.</p>

<p>For additional information on the Sortable events, refer to the <a href="/api/javascript/ui/sortable#events">JavaScript API article on Sortable events</a> and the <a href="http://demos.telerik.com/kendo-ui/web/sortable/integration-listview.html">ListView/Sortable integration demo</a>.</p>

<h2 id="sortable-and-datasource"><a href="#sortable-and-datasource">Sortable and DataSource</a></h2>

<h3 id="reorder-datasource-items"><a href="#reorder-datasource-items">Reorder DataSource Items</a></h3>

<p>The <code>change</code> event of the Sortable widget will fire after a row position is changed. You are able to bind to the <code>change</code> event to update the order of the items in the DataSource.</p>

<p>The example below demonstrates how to shift the position of the items in the DataSource.</p>

<h6>Example</h6>

<pre><code>//the change event handler of the Sortable widget
function onChange(e) {
    var grid = e.sender.element.data("kendoGrid"),
        oldIndex = e.oldIndex , //the old position
        newIndex = e.newIndex , //the new position
        view = grid.dataSource.view(),
        dataItem = grid.dataSource.getByUid(e.item.data("uid")); //retrieve the moved dataItem

    dataItem.Order = newIndex; //update the order
    dataItem.dirty = true;

    //shift the order of the records
    if (oldIndex &lt; newIndex) {
        for (var i = oldIndex + 1; i &lt;= newIndex; i++) {
            view[i].Order--;
            view[i].dirty = true;
        }
    } else {
        for (var i = oldIndex - 1; i &gt;= newIndex; i--) {
            view[i].Order++;
            view[i].dirty = true;
        }
    }

    grid.dataSource.sync(); //submit the changes through the update transport and refresh the Grid
}
</code></pre>

<p>The example below demonstrates how to send the <code>newIndex</code> and <code>oldIndex</code> to the server.    </p>

<h6>Example</h6>

<pre><code>//the change event handler of the Sortable widget
function onChange(e) {
    var grid = e.sender.element.data("kendoGrid"),
        oldIndex = e.oldIndex , //the old position
        newIndex = e.newIndex , //the new position
        dataItem = grid.dataSource.getByUid(e.item.data("uid")); //retrieve moved dataItem

    $.ajax({
        url: "yourUrl",
        dataType: "json",
        data: { //send the data and update the order of the items on the server
            oldIndex: oldIndex,
            newIndex: newIndex,
            dataItem: dataItem
        },
        success: function (response) {
            grid.dataSource.read(); //refresh the Grid
        }
    });
}
</code></pre>

<h2 id="known-limitations"><a href="#known-limitations">Known Limitations</a></h2>

<ul>
<li><p>Kendo UI Sortable does not work as expected with a Kendo UI Grid widget that has paging or virtual scrolling functionalities enabled.
The Sortable widget operates with the existing DOM. It is not aware of the Grid, nor of its DataSource. If paging or virtual scrolling are turned on, the Grid will render only the elements which belong to the current page. As a result, the sorting will be limited to the current page only.</p></li>
<li><p>Kendo UI Sortable does not work as expected with a grouped Grid.
The Sortable widget uses the index of the DOM elements. When the Grid displays grouped data, the index of the DOM element does not match the index of the corresponding data item in the DataSource. This makes updating the order in the DataSource impossible.</p></li>
<li><p>Kendo UI Sortable does not work with a Grid that has locked (frozen) columns.</p></li>
</ul>

<h2 id="see-also"><a href="#see-also">See Also</a></h2>

<p>Other articles on Kendo UI Sortable:</p>

<ul>
<li><a href="/controls/interactivity/sortable/integration-tabstrip">Integration with TabStrip</a></li>
<li><a href="/api/javascript/ui/sortable">Sortable JavaScript API Reference</a></li>
</ul> 
        </article>
    </div>
    <div id="feedback-container">
  <div id="feedback-section">
    <script src="/assets/feedback.js?cb=e99a3802c754fe2425831d58312c7c8b"></script>
    <span id="popupNotification"></span>
    <div id="feedback-menu-container">
      <div id="helpful-buttons-container">
        <span class="side-title">Is this article helpful?</span>
        <a class="button" id="yesButton">Yes</a> /
        <a class="button" id="noButton">No</a>
      </div>
      <div id="feedback-submitted-container">
        <span class="side-title">Thank you for your feedback!</span>
      </div>
    </div>
    <div id="feedback-window-container">
      <div id="feedback-form-window" style="background-color: white;">
        <h1 class="feedback-extw__title">Give article feedback</h1>
        <p>Tell us how we can improve this article</p>
        <span id="feedback-form-popup-container"></span>
        <form id="feedback-form">
          <div id="feedback-checkbox-area">
            <input id="hidden-sheet-id" type="hidden" value="14zzclhdh7dMLpg0iq4-2hweCdEiuxxqP3tHdr42-_Cs">
            <label>
              <input type="checkbox" data-bind="checked: outdatedSample" /> Code samples are inaccurate / outdated.
            </label>
            <span class="required-field" data-bind="visible: outdatedSample"></span>
            <textarea id="feedback-code-sample-text-input" placeholder="Please, specify more details ..." class="feedback-extw__textarea"
              data-bind="visible: outdatedSample, value: inaccurateOutdatedCodeSamplesText">
          </textarea>
            <label>
              <input type="checkbox" data-bind="checked: otherMoreInformation" /> I expected to find other / more information.
            </label>
            <span class="required-field" data-bind="visible: otherMoreInformation"></span>
            <textarea id="feedback-more-information-text-input" class="feedback-extw__textarea" placeholder="Please, specify what information can be added ..."
              data-bind="visible: otherMoreInformation, value: otherMoreInformationText">
          </textarea>
            <label>
              <input type="checkbox" data-bind="checked: textErrors" /> There are typos / broken links / broken page elements.
            </label>
            <span class="required-field" data-bind="visible: textErrors"></span>
            <textarea id="feedback-text-errors-text-input" class="feedback-extw__textarea" placeholder="Please, specify what needs to be fixed ..."
              data-bind="visible: textErrors, value: typosLinksElementsText">
          </textarea>
            <label>
              <input type="checkbox" data-bind="checked: inaccurateContent" /> Content is inaccurate / outdated.
            </label>
            <span class="required-field" data-bind="visible: inaccurateContent"></span>
            <textarea id="feedback-inaccurate-content-text-input" class="feedback-extw__textarea" placeholder="Please, specify which conent ..."
              data-bind="visible: inaccurateContent, value: inaccurateOutdatedContentText"></textarea>
            <label>
              <input type="checkbox" data-bind="checked: otherFeedback" /> Other
            </label>
            <span class="required-field" data-bind="visible: otherFeedback"></span>
            <textarea id="feedback-other-text-input" placeholder="Please, enter more details or not listed feedback ..." class="feedback-extw__textarea"
              data-bind="visible: otherFeedback, value: textFeedback">
          </textarea>
            <input id="feedback-email-input" type="email" placeholder="email (optional)" data-email-msg="Email format is not valid."
              class="feedback-extw__input input" data-bind="value: email" />
          </div>
        </form>
        <div class="feedback-extw__foot">
          <button id="form-submit-button" class="feedback-extw__button button button--action">Send feedback</button>
          <button id="form-close-button" class="feedback-extw__button button">Cancel</button>
        </div>
      </div>
    </div>
    <a id="close-button" class="button">
      <img src="/images/close-btn.svg" alt="close" />
    </a>
  </div>
  <div id="feedback-section-dummy">Dummy</div>
</div>
    <footer>
    <p>Copyright &copy; 2017 Progress Software Corporation and/or its subsidiaries or affiliates. All Rights Reserved.</p>
</footer>

</div>
    </body>
</html>

